<template>
    <div>
        <mt-header title="用户评价">
            <router-link to="" slot="left">
                <mt-button @click="goBack()"></mt-button>
            </router-link>
            <mt-button slot="right"></mt-button>
        </mt-header>
        <div class="evaluate_info mb30 p30">
            <p class="success_percent">成功率：{{  ((sumStar/commentNum)/5*100).toFixed(2)  }}%</p>
            <p class="evaluate_num">
                <span>好评度：</span>
                <img v-if="Math.floor(sumStar/commentNum) == 1"  class="img_wrap" src="../../assets/images/star1@2X.png" alt="">
                <img v-else-if="Math.floor(sumStar/commentNum) == 1 == 2"  class="img_wrap" src="../../assets/images/star2@2X.png" alt="">
                <img v-else-if="Math.floor(sumStar/commentNum) == 1 == 3"  class="img_wrap" src="../../assets/images/star3@2X.png" alt="">
                <img v-else-if="Math.floor(sumStar/commentNum) == 1 == 4"  class="img_wrap" src="../../assets/images/star4@2X.png" alt="">
                <img v-else-if="Math.floor(sumStar/commentNum) == 1 == 5"  class="img_wrap" src="../../assets/images/star5@2X.png" alt="">
                <span>({{ commentNum }}人评论)</span>
            </p>
            <span class="right_arrow"></span>
        </div>

        <div class="comment_list_wrap p30">
            <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0" infinite-scroll-immediate-check="false">
                
                <li v-for="(item,index) in commentLists" :key="index">
                    <img src="../../assets/images/programmer1@2x.png" alt="">
                    <div class="info_wrap">
                        <p>
                            <strong>{{item.content | cutStr(20)}}</strong>
                            <img v-if="item.star == 1"  class="img_wrap" src="../../assets/images/star1@2X.png" alt="">
                            <img v-else-if="item.star == 2"  class="img_wrap" src="../../assets/images/star2@2X.png" alt="">
                            <img v-else-if="item.star == 3"  class="img_wrap" src="../../assets/images/star3@2X.png" alt="">
                            <img v-else-if="item.star == 4"  class="img_wrap" src="../../assets/images/star4@2X.png" alt="">
                            <img v-else-if="item.star == 5"  class="img_wrap" src="../../assets/images/star5@2X.png" alt="">
                        </p>
                        <p class="date">{{item.createTime | convertDate()}}</p>
                    </div>
                </li>
                <!--底部判断是加载图标还是提示“全部加载”-->
                <li class="more_loading" v-show="!queryLoading">
                    <mt-spinner type="snake" color="#8DC43D" :size="20" v-show="moreLoading&&!allLoaded"></mt-spinner>
                    <span v-show="allLoaded">已全部加载</span>
                </li>
            </ul> 
        </div>
    </div>
</template>
<script>
export default {
    name:'commentList',
    data() {
        return {
            commentNum:'',
            sumStar:'',
            //初始化无限加载相关参数
            queryLoading: false,
            moreLoading: false,
            allLoaded: false,
            totalNum: 427,
            pageSize: 10,
            page:1,
            commentLists:[],
            id:''
        }
    },
    created() {
        this.id = this.$route.params.id;
        this.getCommentListFun(this.id,this.page);
    },
    computed: {
      params() {
        return{
          //这里先定义要传递给后台的数据
          //然后将每次请求20条的参数一起提交给后台
          pageSize: this.pageSize
          }
      }
    },
    methods: {
        goBack(){
            this.$router.go(-1);
        },
        //无限加载函数
        loadMore() {
            if(this.allLoaded){
                this.moreLoading = true;
                return;
            }
            if(this.queryLoading){
                return;
            }
            this.moreLoading = !this.queryLoading;
            this.page++;
            
            this.$Axios.post(`/api/user/userEvalutions`,{'userID':16,'pageSize':2,'columnNum':this.page,}).then((res) => {
                if(res.data && res.data.message){
                    this.commentLists = this.commentLists.concat(res.data.evaluationList);
                    // console.log(this.allLoaded);
                    // console.log(this.commentLists.length);
                    // console.log(this.totalNum);
                    if(this.commentLists.length ==this.totalNum){
                        this.allLoaded = true;
                    }
            }
                this.moreLoading = this.allLoaded;

            });
        },
        getCommentListFun(id,page){
            this.$Axios.post(`/api/user/userEvalutions`,{'userID':16,'pageSize':2,'columnNum':this.page,}).then((res)=>{
                console.log(res.data.message);
                this.commentLists = res.data.evaluationList;
                this.commentNum = res.data.rate.commentNum;
                this.sumStar = res.data.rate.commentNum;
                console.log()
            }).catch((err)=>{
                console.log(err,"获取评论列表失败！")
            })
        }
    },
}
</script>
<style lang="scss" scoped>
$basecolor:#fff;
$color1:#8DC43D;
$color2:#FB9427;
$color3:#2B2B2B;
$color4:#555;
$color5:#999;
.mb30{margin-bottom: 30px;}
.p30{padding:30px;background:$basecolor;}
.evaluate_info{
    position: relative;
    border:  0;
    margin-bottom: 30px;
    padding-bottom: 30px;
    p{
        display: flex;
        align-items: center
        span{
            flex: 2;
        }
        img{
            width: 112px;
            height: 21px;
            padding-top: 8px;
            margin-right:10px;
        }
        &:last-child{
            padding-bottom: 0;
        }
    }
    .right_arrow{   
        position: absolute;
        top:50%;
        margin-top: -12px;
        right: 30px;
        width: 21px;
        height: 12px;
        background: url('../../assets/images/pingjiaDown@2x.png');
        background-size: contain;
    }
}
.comment_list_wrap{
    ul{
        li{
            display: flex;
            align-items: top;
            font-size: 24px;
            margin-bottom: 20px;
            img{
                width: 88px;
                height: 88px;
                border-radius: 8px;
            }
            .info_wrap{
                padding-left: 20px;
                flex: 2;
                p{
                    display: flex;
                    padding-bottom: 10px;
                    strong{
                        flex: 1;
                        font-size: 28px;
                        font-weight: 700;
                    }
                    img{
                        padding-top: 10px;
                        width: 112px;
                        height: 21px;
                    }
                }
            }
        }
    }
}


</style>
